<template>
  <div class="ele-body">
    <el-form ref="form" :model="form"  label-width="100px" >
    <el-card  style="margin-top: 10px">
      <div slot="header" class="clearfix" >参数设置</div>
      <el-table :data="form.paramList" ref="paramList"  :border="true" style="width: 100%" >
        <el-table-column type="index" width="50" align="center" label="序号" />
        <el-table-column label="参数类型" width="200" align="center" >
            <template slot-scope="{ row }">
              <!-- <el-form-item label-width="10" style="margin-bottom:0;" :prop="'paramList.'+ $index+'.paramKey'" :rules="rules.paramKey">
                <el-select  style="width: 100%;" filterable clearable v-model="row.paramKey" placeholder="请选择参数类型" >
                  <el-option v-for="(item, index) in paramTypeDatas" :key="index" :label="item.Value" :value="item.Key" />
                </el-select>
              </el-form-item> -->
              <span>{{ row.paramKeyDesc }}</span>
            </template>
        </el-table-column>
        <el-table-column label="参数值"  width="200" align="center">
          <template slot-scope="{ row , $index}">
            <el-form-item label-width="10" style="margin-bottom:0;" :prop="'paramList.'+ $index+'.value'" :rules="rules.value" >
              <el-input  v-model="row.value" placeholder="请输入参数值" >
                <template slot="append">天</template>
              </el-input>
          </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="{ row }">
              <el-input v-model="row.remark" placeholder="请输入备注" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-form>
  <div slot="footer">
      <div class="ele-dailog-bottom">
      <div class="left" style="display: flex;width: 50%;">
      </div>
      <div class="right" style="display: flex;width: 32%;">
        <el-button type="primary" @click="save" v-permission="'System_Parameter_Set'"  >保存</el-button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
  import { QueryParamTypeEnum } from '@/api/enummanger';
  import { QueryParamList,AddParamList } from '@/api/systemmanager/parammanager';
  export default {
    name: 'Params',
    data() {
      return {
        form:{ paramList:[]},
        paramTypeDatas:[],
        rules: {
            value: [{required: true,message: '请输入参数值',trigger: 'blur'}],
            paramKey: [{required: true,message: '请输入参数类型',trigger: 'blur'}],
          },
      };
    },
    computed: {
      // 表格高度
      tableHeight() {
        var fh = this.fixedHeight ? 'calc(100vh - 250px)' : void 0;

        return fh;
      },
      // 表格全屏时高度
      tableFullHeight() {
        var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;

        return fh;
      },
    },
    created(){
      this.init();
    },
    mounted(){
      this.reload();
    },
    methods: {

      /* 保存编辑 */
      save() {
        //校验必填信息
        this.$refs['form'].validate((valid) => {
          if (!valid) {return false;}


          this.loading = true;
          AddParamList(this.form.paramList)
          .then((msg) => {
            this.loading = false;
            this.$message.success(msg);
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
        });
      },

      init(){
        QueryParamTypeEnum().then((res)=>{
         
          this.paramTypeDatas = [];
          this.paramTypeDatas = res;

        });
        // //菜单类型
        // paramTypes.map(m=>{
        //     this.paramTypeDatas.push({Key:m.Key,Value:m.Value});
        // });
      },
      /* 表格数据源 */
      reload() {

        QueryParamList().then((res)=>{

          this.form.paramList = [];
          this.form.paramList = res;
        });
         
        // this.$nextTick(() => {
        //   this.$refs.table.doLayout();
        // });
      },

      // /* 刷新表格 */
      // reload(where) {
      //   this.$refs.table.reload({ where: where });
      // },
    }
  };
</script>
